<template>
  <div class="PublicizeOrder">
    <div class="header">
      <div class="header-l">
        状态：
        <div :class="['tag', tagActive == 0 ? 'active' : '']">待确认 20</div>
        <div :class="['tag', tagActive == 1 ? 'active' : '']">待使用 20</div>
        <div :class="['tag', tagActive == 2 ? 'active' : '']">已完成 20</div>
        <div :class="['tag', tagActive == 3 ? 'active' : '']">已关闭 20</div>
      </div>
      <el-input v-model="searchVal" size="large" :suffix-icon="Search" style="width: 360px;"></el-input>
    </div>
    <div class="table">
      <el-table :data="tableData" show-overflow-tooltip height="100%">
        <el-table-column prop="date" label="订单号" width="100" />
        <el-table-column prop="title" label="标题">
          <template #default="{ }">
            <div class="link-button" @click="toDetails">关于坚持和加强党的全面领导重要论述</div>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="作者名称" width="110" />
        <el-table-column prop="date" label="作者所在机构" width="120" />
        <el-table-column prop="date" label="预约时间" width="110" />
        <el-table-column prop="date" label="状态" width="90">
          <template #default="{ }">
            <div class="status-tag complete">已完成</div>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="评分" width="60" />
        <el-table-column prop="date" label="预约时间" width="110" />
        <el-table-column prop="date" label="评价人数" width="90" />
        <el-table-column prop="date" label="提交时间" width="110" />
        <el-table-column prop="opera" label="操作" width="130">
          <template #default="{ }">
            <div class="link-button">下载签到码</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination prev-text="上一页" next-text="下一页" background layout="prev, pager, next" :total="1000" />
    </div>
  </div>
</template>
<script>
export default { name: 'PublicizeOrder' }
</script>
<script setup>
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const tagActive = ref(0)
const searchVal = ref('')

const tableData = ref([
  { title: '关于坚持和加强党的全面领导重要论述' },
  { title: '关于坚持和加强党的全面领导重要论述' },
])

const toDetails = () => {
  router.push('/personal-center/publicize-order/publicize-evaluate')
}
</script>
<style lang='scss' scoped>
.PublicizeOrder {
  font-family: PingFang SC-Regular, PingFang SC;
  width: 100%;
  height: 100%;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  background-color: #fff;

  .header {
    display: flex;
    align-items: center;
    padding-bottom: 27px;
    justify-content: space-between;

    .header-l {
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 15px;
      color: #525252;
      gap: 10px;

      .tag {
        user-select: none;
        color: #666666;
        padding: 8px 16px;
        background-color: #F4F4F4;
        cursor: pointer;
        transition: all .2s;

        &.active,
        &:hover {
          color: #4A8FE0;
          background-color: #EAF3F9;
        }
      }
    }
  }

  .table {
    width: 100%;
    flex: 1;
    height: 0;

    :deep(.el-table) {
      .el-table__header {
        thead {
          th {
            background-color: #F6F6F6;
            color: #666666;
            font-weight: 600;
            font-size: 14px;
            height: 55px;
          }
        }
      }
    }
  }

  .link-button {
    color: #508CDE;
    cursor: pointer;
  }

  .status-tag {
    width: 64px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    &.complete {
      color: #2CC86D;
      background-color: #EAF9EF;
    }

    &.confirm {
      color: #3D88DE;
      background-color: #EAF3F9;
    }

    &.closed {
      color: #919191;
      background-color: #F4F4F4;
    }

    &.use {
      color: #F2A52A;
      background-color: #F9F3EA;
    }
  }

  .pagination {
    padding-top: 30px;

    :deep(.el-pagination) {
      justify-content: center;
    }
  }
}
</style>